import React, {Component} from 'react';
import './Iheader.css'
import {Menu, Icon} from 'antd';
// import Register from "../Register";
// import UserPage from "../pages/UserPage";

// const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;

export default class App extends React.Component {
    state = {
        current: 'home',
        display: ['', 'none', 'none', 'none', 'none', 'none'],//首页，问卷填写，数据管理，技术文章，用户名，留言板
        needLogin: 'true',
        isProfessor: 'true'
    }

    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    }
    componentDidMount = () => {
        const endDate = new Date().getTime();
        if (window.localStorage) {
            const time = parseInt(endDate - window.localStorage.date);
            const finalDate = time / (1000 * 3600 * 24);
            if (finalDate >= 1) {
                window.localStorage.clear();
            } else {
                if (window.localStorage.role == 0) {
                    this.setState({
                        display: ['', '', '', '', '', ''],
                        needLogin: !this.state.needLogin
                    })
                } else if (window.localStorage.role == 3) {
                    this.setState({
                        display: ['', 'none', 'none', 'none', ''],
                        needLogin: !this.state.needLogin
                    })
                } else if (window.localStorage.role == 1) {
                    this.setState({
                        display: ['', '', '', '', '', ''],
                        needLogin: !this.state.needLogin,
                        isProfessor: !this.state.isProfessor,
                    })
                }
            }
        }
    }
    handleLogout = () => {
        if (window.localStorage.username) {
            window.localStorage.clear();
            window.location.href = '/';
        }
    }

    render() {
        return (
            <div className="col-md-24 col-sm-24">
                {/**图片盒子*/}
                <a className="head_icon col-md-8 col-sm-8" href="#">
                    <img src={require("../img/logo-whut.png")} alt=""/>
                </a>
                {/**蚂蚁导航栏*/}
                <div className='head_menu col-md-16 col-sm-16'>
                    <div className="menu col-md-12 col-sm-12">
                        <Menu
                            onClick={this.handleClick}
                            selectedKeys={[this.state.current]}
                            mode="horizontal"
                            className="icon"
                            style={{lineHeight: '60px'}}
                        >
                            <Menu.Item key="home" style={{display: this.state.display[0]}}>
                                <Icon type="home"/>首页<a href="#hero"/>
                            </Menu.Item>
                            <Menu.Item key="edit" style={{display: this.state.display[1]}}>
                                <Icon type="form"/>问卷填写<a href="/Questionnaire"/>
                            </Menu.Item>
                            {
                                this.state.isProfessor ?
                                    <Menu.Item key="manage" style={{display: this.state.display[2]}}>
                                        <Icon type="tool"/>数据管理<a href="/user/home"/>
                                    </Menu.Item> :
                                    <Menu.Item key="manage" style={{display: this.state.display[2]}}>
                                        <Icon type="tool"/>典案查询<a href="/pro_search"/>
                                    </Menu.Item>
                            }
                            <Menu.Item key='article' style={{display: this.state.display[3]}}>
                                <Icon type="book"/>技术文章<a href="/article"/>
                            </Menu.Item>
                            <Menu.Item key='username' style={{display: this.state.display[4]}}>
                                {
                                    window.localStorage.username
                                }
                            </Menu.Item>
                            <Menu.Item key='messageBoard' style={{display: this.state.display[5]}}>
                                <Icon type="message"/>技术交流<a href="/messageBoard"/>
                            </Menu.Item>
                            {
                                this.state.needLogin ?
                                    <Menu.Item key="login">
                                        <Icon type="login"/>登录<a href="login" rel="noopener noreferrer"/>
                                    </Menu.Item> :
                                    <Menu.Item key="logout" onClick={this.handleLogout}>
                                        <Icon type="logout"/>退出
                                    </Menu.Item>
                            }
                        </Menu>
                    </div>
                </div>
            </div>
        );
    }
}

